<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="提款申请列表" name="first">
                <el-table
                    :default-sort="{prop: 'task_id', order: 'ascending'}"
                    :row-class-name="tableRowClassName"
                    :data="all"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                        prop="id"
                        sortable
                        align='center'
                        label="提款id">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        align='center'
                        label="提款人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="account"
                        align='center'
                        label="提款微信号">
                    </el-table-column>
                    <el-table-column
                        prop="amount"
                        align='center'
                        label="提款金额（元）">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="createdAt"
                        label="申请时间">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="uid"
                        label="提款人ID">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="status_name"
                        sortable
                        label="当前状态">
                    </el-table-column>
                    <el-table-column align='center' label='审核操作'>
                        <template slot-scope='scope'>
                            <el-button
                                size='small'
                                type='success'
                                plain
                                @click='handleDeleteGoods(scope.row.id,scope.row.uid,3)'
                            >允许
                            </el-button>
                            <el-button
                                size='small'
                                type='danger'
                                plain
                                @click='handleDeleteGoods(scope.row.id,scope.row.uid,2)'
                            >拒绝
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已通过的申请" name="second">
                <el-table
                    :default-sort="{prop: 'task_id', order: 'ascending'}"
                    :row-class-name="tableRowClassName"
                    :data="index"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                        prop="id"
                        sortable
                        align='center'
                        label="提款id">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        align='center'
                        label="提款人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="account"
                        align='center'
                        label="提款微信号">
                    </el-table-column>
                    <el-table-column
                        prop="amount"
                        align='center'
                        label="提款金额（元）">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="createdAt"
                        label="申请时间">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="uid"
                        label="提款人ID">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="status_name"
                        sortable
                        label="当前状态">
                    </el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已拒绝的申请" name="third">
                <el-table
                    :default-sort="{prop: 'task_id', order: 'ascending'}"
                    :row-class-name="tableRowClassName"
                    :data="deleted"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                        prop="id"
                        sortable
                        align='center'
                        label="提款id">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        align='center'
                        label="提款人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="account"
                        align='center'
                        label="提款微信号">
                    </el-table-column>
                    <el-table-column
                        prop="amount"
                        align='center'
                        label="提款金额（元）">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="createdAt"
                        label="申请时间">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="uid"
                        label="提款人ID">
                    </el-table-column>
                    <el-table-column
                        align='center'
                        prop="status_name"
                        sortable
                        label="当前状态">
                    </el-table-column>


                </el-table>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                activeName: 'first',
                all: [],
                index: [],
                deleted: []
            }
        },
        methods: {
            init() {
                axios.post('/api/cash/applyList').then(res => {
                    if (res.data.err_code == 0) {
                        this.all = res.data.data;
                    }
                });
                axios.post('/api/cash/accepted').then(res => {
                    if (res.data.err_code == 0) {
                        this.index = res.data.data;
                    }
                });
                axios.post('/api/cash/rejected').then(res => {
                    if (res.data.err_code == 0) {
                        this.deleted = res.data.data;
                    }
                });
            },
            handleDeleteGoods(id, uid, type) {
                console.log(id);
                console.log(type)
                if (type == 3) {
                    this.$confirm('此操作将不可逆, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/api/cash/accepte', {id: id, uid: uid}).then(res => {
                            if (res.data.err_code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功!'
                                });
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: '操作失败!'
                                });
                            }
                            this.init();

                        }).catch(err => {
                            this.$message({
                                type: 'info',
                                message: '操作失败!'
                            });
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '您已取消操作!'
                        });
                    })
                } else if (type == 2) {
                    this.$confirm('此操作将不可逆, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/api/cash/rejecte', {id: id, uid: uid}).then(res => {
                            if (res.data.err_code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功!'
                                });
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: '操作失败!'
                                });
                            }
                            this.init();

                        }).catch(err => {
                            this.$message({
                                type: 'info',
                                message: '操作失败!'
                            });
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '您已取消操作!'
                        });
                    })
                }
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        created() {

            this.init();
        }
    }
</script>

<style scoped>
    .ckxq {

    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
